<template>
  <div id='edit'>
    <div class='title'>
      <v-title></v-title>
      <van-form>
        <van-field name="邮箱"
          label="邮箱" disabled
          v-model='email'
          placeholder="邮箱" />
        <van-field
          name="uploader"
          label="头像">
          <template #input>
            <van-uploader
              max-count=1
              :after-read='afterRead'
              :before-delete='beforeDelete'
              v-model="photo" />
          </template>
        </van-field>

        <van-field name="用户名"
          label="用户名"
          placeholder="用户名"
          v-model='username'
          :rules="[{ required: true, message: '请填写用户名' }]" />

        <van-field type="text"
          name="手机号"
          label="手机号"
          v-model='phone'
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写正确手机号',pattern }]" />
        <div
          style="margin: 16px;">
          <br>
          <van-button round
            block
            color='rgba(26, 144, 255, 0.8)'
            @touchstart='edit'
            size='samll'
            native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import title from './title'
import { Notify, Dialog, Toast } from 'vant'
export default {
  name: 'edit',
  data() {
    return {
      uid: '',
      email: '',
      username: '',
      phone: '',
      photoId: '',
      photo: [],
      pattern: /\d/,
    }
  },
  props: {},
  components: {
    'v-title': title,
    [Notify.Component.name]: Notify.Component,
    [Dialog.Component.name]: Dialog.Component,
  },
  computed: {},
  watch: {},
  created() {
    this.email = window.localStorage.getItem('email')
    this.username =
      window.localStorage.getItem('username') == 'undefined'
        ? ''
        : window.localStorage.getItem('username')
    this.phone =
      window.localStorage.getItem('phone') == 'undefined'
        ? ''
        : window.localStorage.getItem('phone')
    this.uid = window.localStorage.getItem('uid')
  },
  mounted() {},
  methods: {
    edit() {
      this.http({
        method: 'post',
        url: '/api/updateUser',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: this.uid,
          token: window.localStorage.getItem('token'),
          username: this.username,
          photoId: this.photoId,
          phone: window.localStorage.getItem('phone'),
        },
      }).then((res) => {
        console.log(res)
        if (this.username && this.phone) {
          if (res.data.status == 0) {
            if (1) {
              window.localStorage.setItem('username', this.username)
              window.localStorage.setItem('phone', this.phone)
              window.localStorage.setItem('photoId', this.photoId)
              Notify({
                type: 'primary',
                message: '修改成功',
                duration: 800,
                background: 'rgba(26, 144, 255, 0.8)',
              })
              this.$router.replace('/myinfo/info')
            }
          }
        } else {
          Dialog.alert({
            message: ' 请填写完整信息 ',
            confirmButtonColor: 'rgba(26, 144, 255)',
          })
        }
      })
    },
    afterRead(file) {
      var imgFile = new FormData()
      if (file) {
        imgFile.append('file', file.file)
        imgFile.append('uid', window.localStorage.uid)
        imgFile.append('token', window.localStorage.token)
      }
      this.http({
        method: 'post',
        url: 'http://dingrun.xyz:8890/youhelp/newImage',
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        data: imgFile,
      }).then((res) => {
        console.log(res)
        Toast.loading({
          message: '图片上传中...',
          forbidClick: true,
          duration: 800,
        })
        if (res.data.status == 1) {
          Toast.loading({
            type: 'fail',
            message: '图片上传失败',
            forbidClick: true,
            duration: 800,
          })
        } else {
          console.log(res.data.data.imgId)
          Toast.loading({
            type: 'success',
            message: '图片上传成功',
            forbidClick: true,
            duration: 800,
          })
          this.photoId = res.data.data.imgId
        }
      })
    },
    beforeDelete() {
      let vm = this
      //name.index代表图片的索引
      this.http({
        method: 'post',
        url: '/api/admin/deleteImage',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
          imgId: this.photoId,
        },
      }).then((res) => {
        console.log(res)
        if (res.data.status == 0) {
          Toast.loading({
            type: 'fail',
            message: '图片已删除',
            forbidClick: true,
            duration: 800,
          })
        }
      })
      return (file, name) => {
        let fileIndex = name.index
        // console.log(fileIndex)
        vm.fileList[elIndex].splice(fileIndex, 1)
        vm.fileListIs[elIndex].splice(fileIndex, 1)
      }
    },
  },
}
</script>

<style scoped lang='less'>
#edit {
  width: 100%;
  height: 100%;
  .van-uploader {
    width: 100%;
    background-color: #fff;
  }
}
</style>
